<template>
  <span class="user-info">
    <el-select
            v-model="name"
            filterable
            remote
            :clearable="true"
            reserve-keyword
            style="width: 280px;"
            placeholder="请输入关键词搜索(商户名或者手机号)"
            :remote-method="remoteMethod"
            :loading="searchLoading">
      <el-option
              v-for="item in userOption"
              :key="item.id"
              :label="item.name + ' ' + item.phone"
              :value="item.id">
      </el-option>
    </el-select>
  </span>
</template>

<script>
export default {
  name: "UserInfo",
  data(){
    return{
        searchLoading:false,
        userOption: [],
        name: ''
    }
  },
    watch:{
        name:function (val) {
            this.$emit('changeName', val);
        }
    },
  mounted(){
  },
  methods: {
      remoteMethod(query) {
          if (query !== '') {
              this.searchLoading = true;
              setTimeout(() => {
                  this.getUserList(query);
              }, 200);
          } else {
              this.userOption = [];
          }
      },
      getUserList(val) {
          let query={};
          if (!val) {
              query={};
          } else {
              query['name|phone$'] = '%' + val + '%';
          }
          this.userOption = [];
          this.$http.get('api/admin/common/user', {
              params: query
          })
              .then((response) => {
                  this.searchLoading = false;
                  response.data.forEach(item=>{
                      this.userOption.push(item);
                  })
              })
              .catch((error) => {
                  this.searchLoading = false;
                  this.$message.warning(error.data.msg || "数据异常，请重试");
              });
      }
  }
};
</script>

<style scoped>
  .leftDiv{
    width: 385px;
    height: 450px;
    background-color: rgba(0,0,0,.3);
  }
  .rigthDiv{
    width: 385px;
    height: 450px;
    background-color: hsla(0,0%,100%,.3);
  }
  .commonFontColor{
    color: #ffffff;
  }
  .loginBg{
    width: 100vw;
    height: 100vh;
    background: url("https://s1.ax1x.com/2018/07/05/PVIlgH.jpg");
  }
  .logoImg{
    width: 70px;
    height: 70px;
  }
  .el-icon-success{
    color: hsla(0,0%,100%,.4);
    font-size: 40px;
  }
  .secondTitle{
    font-size: 14px;
    color: hsla(0,0%,100%,.9);
  }
  .thirdTitle{
    font-size: 12px;
    color: hsla(0,0%,100%,.7);
  }
  .title{
    font-size: 36px;
    color: rgb(204, 204, 204);
    text-shadow: rgb(204, 204, 204) -1px -1px, rgb(51, 51, 51) 1px 1px;
  }
  .user-icon{
    font-size: 28px;
    color: rgba(255,255,255,0.6);
    line-height: 50px;
    margin-left: 30px;
  }
  .login-ing{
    width: 80%;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    margin: 40px auto 0;
    border-radius: 3px;
    color: hsla(0,0%,100%,.8);
    background-color: rgba(0,0,0,.3);
    text-align: center;
  }
</style>
<style>
  .userInput .el-input__inner{
    background-color: rgba(0,0,0,.3)!important;
    padding-left: 70px!important;
    height: 50px;
    border-color: hsla(0,0%,100%,0)!important;
    color: hsla(0,0%,100%,.5);
    font-size: 16px;
  }
</style>